<template>
	<view class="content">

		<view class="huibg">
			<view class="ketxt">
					{{type == 2?'佣金':'粮币'}}余额
				<!-- <text>（总佣金：￥{{userInfo.commission}}）</text> -->
			</view>
			<view class="ketitle">
				{{type == 2?userInfo.with_month:userInfo.wallet}}币
			</view>
			<view class="img">
				<image :src="'/images/m_r.png' | formatImgUrl" ></image>
				<view @click="$go('/pages/user/bill')" class="txts">
					交易记录 >
				</view>
			</view>
		</view>
		
		<view class="con">
			<view class="tp">
				<view>请选择充值的数量</view>
				<view @click="goToOtherxie(6)" class="rig">充值规则 > </view>
			</view>
		</view>
		
		
		<view v-if="type == 2" class="jinboxs">
			
			<view class="bi" :class="navIndex==1?'active_bi':''"  @click="navTap(1)">
				<view class="top" :class="navIndex==1?'active_bi':''">
					1 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==1?'active_bi':''">
					售价 1.00元
				</view>
			</view>
			
			<view class="bi" @click="navTap(6)"  :class="navIndex==6?'active_bi':''">
				<view class="top" :class="navIndex==6?'active_bi':''">
					6 <image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==6?'active_bi':''">
					售价 6.00元
				</view>
			</view>
			
			<view class="bi" @click="navTap(10)" :class="navIndex==10?'active_bi':''">
				<view class="top" :class="navIndex==10?'active_bi':''">
					10 <image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==10?'active_bi':''">
					售价 10.00元
				</view>
			</view>
			
		<!-- </view> -->
		<!-- <view v-if="type == 2" class="jinboxs"   > -->
			<view class="bi"  @click="navTap(20)" :class="navIndex==20?'active_bi':''">
				<view class="top"  :class="navIndex==20?'active_bi':''">
					20 <image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom"  :class="navIndex==20?'active_bi':''">
					售价 20.00元
				</view>
			</view>
			<view class="bi" @click="navTap(30)"  :class="navIndex==30?'active_bi':''">
				<view class="top" :class="navIndex==30?'active_bi':''">
					30<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==30?'active_bi':''">
					售价 30.00元
				</view>
			</view>
			<view class="bi" @click="navTap(88888)" :class="navIndex==88888?'active_bi':''">
				<view class="top" :class="navIndex==88888?'active_bi':''">
			<!-- 		自定义 -->
					{{money==''?"自定义":money}}
			
					
					<image  v-if="money!=''" :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==88888?'active_bi':''">
					{{money==''?"点击输入":'售价'+money+'元'}}
				</view>
			</view>
		</view>
		
		
		<view v-if="type == 1" class="jinboxs">
			
			<view class="bi" :class="navIndex==Number(item.money).toFixed(0)?'active_bi':''"  @click="navTap(Number(item.money).toFixed(0))" v-for="(item,index) in list">
				<view class="top" :class="navIndex==Number(item.money).toFixed(0)?'active_bi':''">
					 {{Number(item.money).toFixed(0)}} 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==Number(item.money).toFixed(0)?'active_bi':''">
					 {{Number(item.price).toFixed(0)}} 元
				</view>
			</view>
			<!-- <view class="bi" :class="navIndex==10?'active_bi':''"  @click="navTap(10)">
				<view class="top" :class="navIndex==10?'active_bi':''">
					10 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==10?'active_bi':''">
					 10元
				</view>
			</view>
			
			<view class="bi" @click="navTap(50)"  :class="navIndex==50?'active_bi':''">
				<view class="top" :class="navIndex==50?'active_bi':''">
					50 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==50?'active_bi':''">
					 50元
				</view>
			</view>
			<view class="bi" @click="navTap(100)" :class="navIndex==100?'active_bi':''">
				<view class="top" :class="navIndex==100?'active_bi':''">
					100 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==100?'active_bi':''">
					100元
				</view>
			</view>

			<view class="bi"  @click="navTap(500)" :class="navIndex==500?'active_bi':''">
				<view class="top"  :class="navIndex==500?'active_bi':''">
					500 
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom"  :class="navIndex==500?'active_bi':''">
					 500元
				</view>
			</view>
			<view class="bi" @click="navTap(1000)"  :class="navIndex==1000?'active_bi':''">
				<view class="top" :class="navIndex==1000?'active_bi':''">
					1000
					<image :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==1000?'active_bi':''">
					 1000元
				</view>
			</view> -->
			<view class="bi" @click="navTap(88888)" :class="navIndex==88888?'active_bi':''">
				<view class="top" :class="navIndex==88888?'active_bi':''">
					{{money==''?"自定义":money}}
					<image v-if="money!=''" :src="'/images/255.png' | formatImgUrl" mode=""></image>
				</view>
				<view class="bom" :class="navIndex==88888?'active_bi':''">
					{{money==''?"点击输入":'售价'+money+'元'}}
				</view>
			</view>
		</view>
		
<!-- 		<scroll-view class="jinbox" scroll-x="true">
			<view class="jinli" v-for="(item,index) in list" :class="{'active': index == navIndex}"
				@click="navTap(index)">
				<view class="bitxt">
					{{item.money}}粮币
				</view>
				<view class="dortxt">
					￥<text>{{item.price}}</text>
				</view>
			</view>
		</scroll-view> -->
		<view class="nobox">
			<image :src="'/images/no.png' | formatImgUrl" class="tanpic" mode=""></image>
			<view class="notxt">
				粮币{{type == 2?'兑换':'充值'}}到账后不支持退回哦
			</view>
		</view>

		<view class="wrap">
			<view class="what">
				什么是粮币？
			</view>
			<view class="wajie">
				粮币是平台约稿及一系列支付相关操作所使用的虚拟货币，用户可使用粮币在平台内代替金额进行支付。
			</view>

			<view class="what">
				粮币的充值方式？
			</view>
			<view class="wajie">
				除了现金充值外，粮币还可以通过账户佣金进行充值。
			</view>
			
			<view class="what">
				粮币的充值延迟？
			</view>
			<view class="wajie">
				充值成功后到账可能延迟，如长时间未到账，请联系客服查询。
			</view>
		</view>

		<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="zaibox" v-if="type == 2">
				<view class="zaileft">
					<view class="dbox">
						<view class="zaititle">
							立即兑换
						</view>
						<view class="text">
							获取更多粮币
						</view>
					</view>
					<view class="zaitxt">
						使用佣金进行粮币兑换
					</view>
				</view>
				<view class="que" @click="sendCode">
					佣金兑换
				</view>
			</view>
			
			<view class="zaibox" v-if="type == 1">
				<view class="zaileft">
					<view class="dbox">
						<view class="zaititle">
							立即充值
						</view>
						<view class="text">
							获取更多粮币
						</view>
					</view>
					<view class="zaitxt">
						使用现金进行粮币充值
					</view>
				</view>
				<view class="que" @click="showPay=true">
					现金充值
				</view>
			</view>
			
			<view class="xiebox" @click="isRead =( isRead == 2?0:2)" :class="isRead == 1 ? 'shake-horizontal' : ''">
				<!-- <label>
					<u-checkbox shape="circle" size="14" :checked="isRead" activeColor="#45C4B0" inactiveColor="#999" @change="changeBox"></u-checkbox>
				</label> -->
				<view class="xietxt">
					充值即代表阅读并同意<text @click.stop="goToOtherxie(6)">《充值协议》</text>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" mode="center" @close="show=false" >
			<view class="mask">
				<view class="jatitle" v-if="type==0">
					{{type == 2?'兑换':'充值'}}价格
				</view>
				<input  type="number"  min="1" max="999" step="1"  class="japut" maxlength="5" placeholder="请输入价格(元)"
					v-model="money" @input="onInput">
				<view class="qubox">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="que" @click="setting">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="center" :show="show2">
			<view class="mask-tip">
				<view class="tit">
					兑换验证提醒
				</view>
				<view class="txt">
					请输入验证码核实身份
				</view>
				<view class="code display-flex">
					<u-code-input
						v-model="code"
						:maxlength="6"
						space="5"
						size="33"
						:focus="true"
					></u-code-input>
				</view>
				<view class="btn" @tap="submit">
					开始验证
				</view>
				<view class="txt" style="margin-top: 12px;" @tap="show2=false,$go('/showcase/login/phone')">
					无法验证？切换绑定手机
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show2 = false,code=''" class="closepic" mode="aspectFit"></image>
		</u-popup>
		
		<u-popup :show="showPay" mode="bottom" @close="showPay=false">
			<view class="custom-bot-pay">
				<view class="title">
					支付方式
				</view>
				<block v-if="platform == 'ios'">
					<view class="pay-item display-flex">
						<image :src="'/images/ios.png' | formatImgUrl" mode="aspectFit" class="icon"></image>
						<text>Apple ID支付</text>
						<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel"></image>
					</view>
				</block>
				<block v-else>
					<view class="pay-item display-flex" @tap="changeType(4)">
						<image :src="'/images/zhi.png' | formatImgUrl" mode="aspectFit" class="icon"></image>
						<text>支付宝支付</text>
						<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-if="paytype == 4"></image>
						<image :src="'/images/weixuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-else></image>
					</view>
					<view class="pay-item display-flex" @tap="changeType(3)">
						<image :src="'/images/wei.png' | formatImgUrl" mode="aspectFit" class="icon"></image>
						<text>微信支付</text>
						<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-if="paytype == 3"></image>
						<image :src="'/images/weixuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-else></image>
					</view>
				</block>
				
		
				<view class="marginBorder" style="margin-top: 10px;"></view>
				<view class="btn" @tap="showPay=false,submit()">
					确认支付
				</view>
				<view class="xietxt">
					我已阅读并同意：<text @click.stop="goToOtherxie(6)">《平台充值服务协议》</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showPay: false,
				isRead: false,
				userInfo: this.$db.get('userInfo'),
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				zhiList: [],
				navIndex: 1,
				type: 1,
				list: [],
				isClick: false,
				price:1,
				money:'',
				show:false,
				show2: false,
				code: '',
				is_dong: '',
				paytype: 4,
				platform: ''
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
				
				let title = e.type == 1 ? "现金充值" : "佣金兑换"
				uni.setNavigationBarTitle({
					title: title
				})
			} else {
				this.$common.errorToShow('参数异常')
			}
			
			if(this.type == 1){
				this.navIndex = 10
			}
		},
		onShow() {
			this.platform = uni.getSystemInfoSync().platform
			this.getUserInfo()
			this.getList()
			
			this.getAccountState()
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			changeType(num){
				this.paytype = num
			},
			onInput(e){
				this.money = parseInt(this.money)
				if(this.money < 1){
					this.$common.errorToShow('最小为1~')
					this.money = 1
				}
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 7,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			changeBox(e){
				this.isRead = e ? 2 : 0
			},
			// 短信验证
			sendCode(){
				let num = this.type == 2?this.userInfo.with_month:this.userInfo.wallet
				if(Number(this.money )> Number(num)){
					this.$common.errorToShow('金额不能大于余额噢~')
					return
				}
				
				this.$api.default.request('user/sendSmsUser', {}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.show2=true
						})
					}
				})
			},
			goToxie(id){
				// pages/user/abount_dea
				uni.navigateTo({
					url: '/pages/user/abount_dea?id='+id
				})
				
				console.log(this.$config.default.Url + '/agreement/1000006',77)
				// uni.navigateTo({
				// 	url:'/pages/webview/webview?url=' +this.$config.default.Url + '/agreement/1000006'
				// })
			},
			setting(){
				this.price = this.money;
				this.show = false
			},
		
			getList() {
				if(uni.getSystemInfoSync().platform === 'ios'){
					this.$api.default.request('user/exchangeList_ios', {
						type: this.type
					}).then((res) => {
						if (res.code) {
							this.list = res.data
						}
					})
				}else{
					this.$api.default.request('user/exchangeList', {
						type: this.type
					}).then((res) => {
						if (res.code) {
							this.list = res.data
							console.log(this.list,777)
						}
					})
				}
				
				
				
			},
			submit() {
				if(this.is_dong == 1){
					this.$common.errorToShow('您的充值权限已被暂时关停')
					return
				}
				
				if (this.isClick) {
					return; // 如果已经禁止点击，则直接返回
				}
				if (!this.isRead) {
					this.isReadTip()
				} else {
					
					if (this.type == 2) {
						this.$api.default.request('order/exchange_1', {
							type: this.type,
							id: this.price,
							code: this.code
						}).then((res) => {
							if (res.code) {
								this.$common.successToShow(res.msg, () => {
									this.getUserInfo()
									this.isClick = false
									uni.navigateBack()
								})
							}
						})
					} else {
						var prams = {}
						prams['order_type'] = 2
						prams['pay_type'] = this.paytype
						// prams['fid'] = this.list[this.navIndex].id
						prams['price'] = this.price
						prams['app_type'] = 2
						
						let that = this;
						this.$api.default.request('order/createOrder', prams).then((res) => {
							if (res.code) {
								that.isClick = false
								uni.requestPayment({
								    provider: this.paytype == 4 ? 'alipay' : 'wxpay',
								    orderInfo: res.data.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
								    success: function (res) {
										that.getUserInfo()
								        uni.navigateBack()
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
								
								// this.$common.wxPay(res.data, () => {
									
									
								// })
							}
						})
						
						
						
						// this.$api.default.request('order/createOrder', prams).then((res) => {
						// 	if (res.code) {
						// 		this.$common.wxPay(res.data, () => {
						// 			this.isClick = false
						// 			uni.navigateBack()
						// 		})
						// 	}
						// })
					}

				}
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意充值协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						this.userInfo = res.user
						
						this.$db.set('userInfo',res.user)
					}
				})
			},
			navTap(index) {
				this.navIndex = index
				if(index != 88888){
					this.price = index;
				}else{
					this.show = true
				}
				
			},
		}
	}
</script>

<style lang="scss">
	
	.closepic{
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx auto 0;
	}
	.mask-tip{
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;
		font-family: '思源黑体';
		
		.tit{
			font-size: 16px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.phone{
			margin-top: 8px;
			font-size: 24px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.txt{
			margin-top: 4px;
			font-size: 12px;
			color: #45C4B0;
		}
		
		.desc{
			margin-top: 12px;
			text-align: left;
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.btn{
			margin-top: 30px;
			width: 100%;
			height: 43px;
			line-height: 43px;
			text-align: center;
			border-radius: 8px;
			background: #45C4B0;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.code {
			margin-top: 12px;
			padding: 0 20rpx;
			justify-content: center;
		}
	}
	
	.content {
		
		padding-top: 40rpx;
		position: relative;
		.tp{
			border-top: 1px solid rgba(153, 153, 153, 0.1);;
			color: #3d3d3d;
			padding-top: 30rpx;
			width: 90%;
			margin-left: 5%;
			height: 30px;
			font-weight: 700;
			font-size: 34rpx;
			view{
				float: left;
			}
			.rig{
				float: right;
				font-size: 26rpx;
				color: #45C4B0;
			}
		}
		
		
		.huibg {
			background: #fff;
			padding: 40rpx 30rpx 10rpx;
			border-top: 1rpx solid rgba(242, 245, 242, 1);
			.img{
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				height: 160rpx;
				width: 220rpx;
				overflow: hidden;
				
				image {
					height: 160rpx;
					width: 220rpx;
				}
				
				.txts {
					font-size: 26rpx;
					position: relative;
					left: 70rpx;
					top: -120rpx;
					color: #45C4B0;
				}
			}
			.ketxt {
				font-size: 32rpx;
				font-weight: 700;
				
				letter-spacing: 0em;
				color: #3D3D3D;
				line-height: 40rpx;
				text{
					color: #999999;
				}
			}
		
			.ketitle {
				font-size: 56rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #45C4B0;
				line-height: 86rpx;
				padding-bottom: 20rpx;
			}
			
		}
	
		
		
		
		
		
		
		.jinboxs{
			margin-top:15px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: row wrap;
			align-content: flex-start;
			.bi{
				 margin: 10px;
				 flex: 1 0 25%;
				width: 105px;
				height: 84px;
				border-radius: 4px;
				opacity: 1;
				background: #FFFFFF;
				box-shadow: 0px 4px 10px 0px rgba(14, 106, 92, 0.17);
				.top{
					width: 100%;
					padding-top: 15px;
					text-align: center;
					color: #45C4B0;
					font-size: 22px;
					font-weight: 700;
					text{
						font-weight: 500;
						font-size: 12px;
					}
					image{
						margin-left: 6rpx;
						width: 28rpx;
						height: 26rpx;
					}
				}
				.bom{
					margin-top: 10px;
					font-size: 14px;
					width: 100%;
					text-align: center;
					color: #3D3D3D;
				}
			}
			.active_bi{
				background: #45C4B0 !important;
				color: #ffffff !important;
			}
			
		}
		
		.tobg {
			width: 100%;
			height: 168rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.yutxt {
			line-height: 40rpx;
			font-size: 28rpx;
			color: #3D3D3D;
			padding-left: 30rpx;
		}

		.yutitle {
			font-size: 60rpx;
			font-weight: bold;
			color: #3D3D3D;
			line-height: 86rpx;
			padding-left: 30rpx;
			padding-bottom: 80rpx;
		}

		.jinbox {
			white-space: nowrap;
			padding: 0 1rpx 20rpx 30rpx;
			width: 719rpx;

			.jinli {
				display: inline-block;
				min-width: 184rpx;
				padding-right: 30rpx;
				margin-right: 28rpx;
				height: 198rpx;
				border-radius: 12px 30px 12px 12px;
				opacity: 1;
				border: 2px solid rgba(153, 153, 153, 0.1);

				.bitxt {
					font-size: 24rpx;
					padding: 20rpx 0 32rpx 20rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.dortxt {
					padding-left: 20rpx;
					font-size: 32rpx;
					color: #3D3D3D;
					font-weight: bold;

					text {
						font-size: 72rpx;
						color: #3D3D3D;
					}
				}
			}

			.active {
				border: 2px solid #45C4B0;
				background: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), rgba(218, 253, 186, 0.5);

				.bitxt {
					font-size: 24rpx;
					padding: 20rpx 0 32rpx 20rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #45C4B0;
				}

				.dortxt {
					padding-left: 20rpx;
					font-size: 32rpx;
					color: #45C4B0;
					font-weight: bold;

					text {
						font-size: 72rpx;
						color: #45C4B0;
					}
				}
			}
		}

		.nobox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 60rpx;
			margin-top: 20px;
			.tanpic {
				width: 32rpx;
				height: 32rpx;
			}

			.notxt {
				font-size: 20rpx;
				padding-left: 12rpx;
				color: #999999;
			}
		}

		.wrap {
			padding: 0 30rpx;

			.what {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				padding-bottom: 12rpx;
			}

			.wajie {
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0px;
				padding-bottom: 40rpx;
				line-height: 28rpx;
				color: #999999;
			}
		}

		.dibox {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			z-index: 222;
			background-color: #ffffff;
			padding: 20rpx 0;
			box-shadow: 0px -4px 10px 0px rgba(69, 196, 176, 0.2);

			.zaibox {
				width: 630rpx;
				height: 80rpx;
				border-radius: 12px;
				background: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 10rpx;

				.zaileft {
					padding: 0 20rpx;

					.dbox {
						display: flex;
						align-items: center;

						.zaititle {

							font-size: 28rpx;
							font-weight: bold;
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

						}

						.text {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							padding-left: 8rpx;
						}
					}

					.zaitxt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0px;
						color: #999999;
					}
				}

				.que {
					width: 190rpx;
					height: 80rpx;
					border-radius: 10px;
					opacity: 1;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}

				.isactive {
					background: #999999;
				}
			}

			.xiebox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 10rpx;

				.xietxt {
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;

					text {
						font-size: 20rpx;
						font-weight: bold;
						color: #45C4B0;
						padding: 0 10rpx;
					}
				}
			}
		}
		
		.mask {
			background-color: #FFFFFF;
			width: 500rpx;
			border-radius: 10px;
			padding: 30rpx;
		
			.jatitle {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}
		
			.japut {
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 15rpx;
				margin-bottom: 30rpx;
			}
		
			.qubox {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.quli {
					border-radius: 8px;
					border: 1px solid #eeeeee;
					font-size: 24rpx;
					color: #999999;
					width: 220rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}
		
				.que {
					border-radius: 8px;
					border: 1px solid #45C4B0;
					background-color: #45C4B0;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					width: 220rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>